<script>
import { menuHandler } from '@/handler/menuHandler';
import { mapGetters, mapState } from 'vuex';
import { VR_COMPOUND_ADD } from '@/config/menuId';
import { getMemberPower, submitVrTask } from '@/api/user';

export default {
  name: 'TabVr',
  components: {},
  props: {},
  data() {
    return {};
  },
  created() {},
  mounted() {},
  watch: {},
  computed: {
    ...mapGetters(['sessionUser']),
    ...mapState({
      hmDelSummaryInfo: (state) => state.houseInfo.hmDelSummaryInfo,
    }),
    ...mapGetters({
      houDelId: 'houseInfo/houDelId',
    }),
  },
  methods: {
    getIframeNodes() {
      const { hmDelSummaryInfo } = this;
      return (
        <iframe class="vr" ref="iframe" src={hmDelSummaryInfo && hmDelSummaryInfo.vrUrl + '&access=preview'}>
          <span>你的浏览器不支持该功能</span>
        </iframe>
      );
    },
    // vr下载中
    getLoadingNodes() {
      return (
        <el-empty>
          <template slot="image">
            <el-image class="rotate" src={require('@/assets/images/icons/jiaoshi_duose_xiazaizhong.png')}></el-image>
          </template>
          <template slot="description">
            <p style="color: black; line-height: 2; font-size: 16px">VR正在下载中！</p>
            <p>（VR预计5分钟后下载完成，请您耐心等待...）</p>
          </template>
          <el-button size="small" type="primary" round disabled>
            VR下载中...
          </el-button>
        </el-empty>
      );
    },
    // 重新下载vr
    getReloadNodes() {
      return (
        <el-empty>
          <template slot="description">
            <p style="color: black; line-height: 2; font-size: 16px">VR下载失败！</p>
            <p>（点击按钮重新下载VR，预计5分钟后下载完成...）</p>
          </template>
          <el-button size="small" type="primary" round onClick={this.handleDownLoadVR}>
            点我重新下载VR
          </el-button>
        </el-empty>
      );
    },
    // 尚未下载vr
    getNotYetNodes() {
      return (
        <el-empty>
          <template slot="description">
            <p style="color: black; line-height: 2; font-size: 16px">您的房源还未下载VR哦~</p>
            <p>（当前房源为VR时才可以进行VR下载，VR预计5分钟后下载完成...）</p>
          </template>
          <el-button size="small" type="primary" round onClick={this.handleDownLoadVR}>
            点我下载VR
          </el-button>
        </el-empty>
      );
    },

    getNullNodes() {
      return (
        <el-empty>
          <template slot="description">
            <p style="color: black; line-height: 2; font-size: 16px">房源暂无相关VR～</p>
          </template>
        </el-empty>
      );
    },

    handleDownLoadVR() {
      return menuHandler
        .call(this, VR_COMPOUND_ADD)
        .then(() => {
          submitVrTask({
            delId: this.houDelId,
          }).then(() => {
            this.hmDelSummaryInfo.houSubTypeState = 1;
          });

          getMemberPower({
            menuId: VR_COMPOUND_ADD,
            agentId: this.sessionUser.id,
          });

          return this.$messageBox
            .confirm('vr房源下载中，需要5分钟', {
              confirmButtonText: '我知道了',
              showCancelButton: false,
            })
            .finally(() => {
              return Promise.resolve();
            });
        })
        .catch((error) => {
          if (error && error.then) {
            return error.then(() => Promise.reject());
          } else {
            return Promise.resolve();
          }
        });
    },
  },
  render() {
    const { hmDelSummaryInfo } = this;
    const renderFnMap = {
      '-1': this.getReloadNodes,
      10: this.getIframeNodes,
      1: this.getLoadingNodes,
      0: this.getNotYetNodes,
    };
    const renderMethod = renderFnMap[hmDelSummaryInfo.houSubTypeState] || (() => null);

    return <div>{hmDelSummaryInfo && hmDelSummaryInfo.houSubType == 1 ? renderMethod() : this.getNullNodes()}</div>;
    // return <div>{this.getLoadingNodes()}</div>;
  },
};
</script>
<style scoped>
.vr {
  width: 100%;
  height: 480px;
}

@keyframes spin {
  from {
      transform: rotate(0deg);
  }
  to {
      transform: rotate(360deg);
  }
}

.rotate{
  animation: spin 1.2s linear infinite;
}
</style>